<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏队列与微队列</title>
</head>
<body>
<!--

-->
<script>
    /**
     * js中用来存储执行回调函数（任务）的队列，宏队列，微队列
     * 宏队列：dom事件回调、ajax回调、定时器回调
     * 微队列：promise回调、mutation回调（html5新增）
     * 事件调用顺序：初始化同步代码->微队列->宏队列
     * 1.JS引擎首先必须先执行所有初始化同步任务代码
     * 2.每次准备取出第一个宏任务的时候，要先将微队列中的微任务一个接一个执行完毕才执行宏任务
     * */
    setTimeout(() => { // 立即放入宏队列
        console.log('timeout callback1()');
        Promise.resolve(3).then(value => {
            console.log('Promise onResolved3()', value);
        })
    }, 0);

    setTimeout(() => { // 立即放入宏队列
        console.log('timeout callback2()')
    }, 0);
    Promise.resolve(1).then(
        value => { //立即放入微队列
            console.log('Promise onResolved1()', value)
        }
    );
    Promise.resolve(2).then(
        value => { //立即放入微队列
            console.log('Promise onResolved2()', value)
        }
    );
</script>
</body>
</html>